<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function (){
		var aLi = document.getElementsByTagName('li');

		//下面的代码，点击执行弹出总是3.因为点击之前for循环已经先结束了，所以i=3
	/*	for (var i = 0; i < aLi.length; i++) {
			aLi[i].onclick = function (){
				alert(i);
			}
		};
*/

		//方法一：闭包.如何让外部函数不影响内部函数，只需要把外部的参数传进去便可
/*		for (var i = 0; i < aLi.length; i++) {

			(function (i){			//把每一次循环的i传进来作为内部函数的参数

				aLi[i].onclick = function (){
					alert(i);
				}

			})(i);					//自执行
		};
*/
		//方法二：闭包
		for (var i = 0; i < aLi.length; i++) {

			aLi[i].onclick = (function (i){
				return function (){
					alert(i);
				}
			})(i);
			
		};

	}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>
</html>